<template>
    <OAMain title="首页">
        <el-card>
            <template #header>
                <h2>部门人员数量统计</h2>
            </template>
            <div id="DepartmentStaffCount" style="width: 50%;height: 300px;"></div>
        </el-card>

        <el-row :gutter="20">
            <el-col :span="12">
                <el-card>
                    <template #header>
                        <h2>最新通知</h2>
                    </template>
                    <el-table :data="informs" style="width: 100%">
                        <el-table-column label="标题">
                            <template #default="scope">
                                <RouterLink class="title" :to="{ name: 'detail', params: { pk: scope.row.id } }">
                                    {{ scope.row.title }}
                                </RouterLink>
                            </template>
                        </el-table-column>
                        <el-table-column label="作者" prop="author.realname"></el-table-column>
                        <el-table-column label="发布时间">
                            <template #default="scope">
                                {{ timeFormatter.stringFromDateTime(scope.row.create_time) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="是否已读">
                            <template #default="scope">
                                <el-tag v-if="scope.row.reads.length > 0">已读</el-tag>
                                <el-tag v-else type="warning">未读</el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <template #header>
                        <h2>最新请假</h2>
                    </template>
                    <el-table :data="absents" style="width: 100%">
                        <el-table-column label="部门" prop="requester.department.name"></el-table-column>
                        <el-table-column label="发起人" prop="requester.realname"></el-table-column>
                        <el-table-column label="起始日期" prop="start_time"></el-table-column>
                        <el-table-column label="结束日期" prop="end_time"></el-table-column>
                        <el-table-column label="发起时间">
                            <template #default="scope">
                                {{ timeFormatter.stringFromDateTime(scope.row.create_time) }}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </OAMain>
</template>

<script setup name="Home">
import OAMain from '@/components/OAMain.vue';
import timeFormatter from '@/utils/timeFormatter';
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import homeHttp from '@/api/homeHttp';
import * as echarts from 'echarts';

let informs = ref([]);
let absents = ref([]);


onMounted(async () => {
    try {
        informs.value = await homeHttp.getLatestInforms();
        absents.value = await homeHttp.getLatestAbsents();
        let rows = await homeHttp.getDepartmentStaffCount();
        let Xdata = rows.map((row) => row.name)
        let Ydata = rows.map((row) => row.staff_count)
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('DepartmentStaffCount'));
        // 绘制图表
        myChart.setOption({
            xAxis: {
                data: Xdata
            },
            yAxis: {
                minInterval: 1 // 设置最小间隔为 1，确保显示为整数
            },
            series: [{
                name: '人员数量',
                type: 'bar',
                data: Ydata
            }]
        });
    } catch (detail) {
        ElMessage.error(detail);
    }
})


</script>

<style scoped>
.title {
    text-decoration: none;
}
</style>